<script lang="ts" setup>
import { ref } from 'vue'

import AdvancedTable from '@/components/sofastui/AdvancedTable/AdvancedTable.vue'
import AdvancedForm from '@/components/sofastui/AdvancedForm/AdvancedForm.vue'

import { fields, config, formRules } from './constant'

const advancedFormRef = ref()
const advancedTableRef = ref()

const options = ref([
  {
    label: '系统类',
    value: 0,
  },
  {
    label: '业务类',
    value: 1,
  },
])

const searchFormData = ref<{
  type: number
}>({
  type: options.value[0].value,
})

const active = ref(options.value[0].value)

const changeTab = (val: number) => {
  console.log(val)
  searchFormData.value.type = val
}

// 创建
const handelAdd = () => {
  advancedFormRef.value?.show('add', {})
}

// 行展开
const handelRowExpand = (data: { [key: string]: unknown }) => {
  advancedFormRef.value?.show('update', data)
}

// 刷新表格数据
const refreshTableData = () => {
  advancedTableRef.value!.refresh()
}
</script>

<template>
  <LTab :options="options" v-model="active" @change="changeTab">
    <AdvancedTable
      :key="active"
      ref="advancedTableRef"
      :query="searchFormData"
      :fields="fields"
      :config="config"
      @add="handelAdd"
      @rowExpand="handelRowExpand"
    >
    </AdvancedTable>
  </LTab>
  <!-- 修改表单 -->
  <AdvancedForm
    ref="advancedFormRef"
    :config="config"
    :rule="formRules"
    @success="refreshTableData"
  />
</template>
